﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SendDashboard.aspx.cs" Inherits="famails.BackEnd.page.SendDashboard" MasterPageFile="~/Master.Master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div style="width:100%;padding:10px;">
<!--start content 01-->
    <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="border:1px solid #333;margin-bottom:10px;padding:0px;">
                <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="padding:10px 20px;background:#000;color:#fff;font-size:18px;font-weight:bold;position:relative;">   
                    Số liệu thống kê chi tiết
                </div>
                <asp:Panel ID="pnSearch" runat="server">
                    <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="height: auto;padding:10px;">
                        <fieldset>
                            <%--<div class="col-md-2 col-lg-2 col-sm-2 col-xs-4" style="padding:5px;padding-left:0px;">
                                <label for="simple-input" style="line-height:30px;font-weight: bolder; text-transform: none">
                                    Từ ngày</label>
                            </div>
                            <div class="col-md-3 col-lg-3 col-sm-3 col-xs-8" style="padding:5px;padding-left:0px;">
                                    <label ID="txtFromDate" ></label>       

                            </div>
                            <div class="col-md-2 col-lg-2 col-sm-2 col-xs-4" style=padding:5px;"padding-left:0px;">
                                <label for="simple-input" style="line-height:30px;font-weight: bolder; text-transform: none">
                                    Đến ngày</label>
                            </div>
                            <div class="col-md-3 col-lg-3 col-sm-3 col-xs-8" style="padding:5px;padding-left:0px;">
                                <label ID="txtToDate" ></label>

                            </div>--%>
                            <div class="col-md-5 col-lg-5 col-sm-5 col-xs-12" style="padding:0px;">
                                <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="padding:5px;padding-left:0px;">
                                    <label for="simple-input" style="line-height:30px;font-weight: bolder; text-transform: none">
                                        Từ ngày</label>
                                </div>
                                <div class="col-md-8 col-lg-8 col-sm-8 col-xs-8">
                                    <div id="txtFromDate"></div>
                                </div>
                            </div>
                            <div class="col-md-5 col-lg-5 col-sm-5 col-xs-12" style="padding:0px;">
                                <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="padding:5px;padding-left:0px;">
                                    <label for="simple-input" style="line-height:30px;font-weight: bolder; text-transform: none">
                                        Đến ngày</label>
                                </div>
                                <div class="col-md-8 col-lg-8 col-sm-8 col-xs-8">
                                    <div id="txtToDate"></div>
                                </div>
                            </div>
                            <div class="col-md-2 col-lg-2 col-sm-2 col-xs-12" style="padding:5px 5px 0px 5px;padding-left:0px;">
                                <div id="btnFilter" style="padding:6px 13px;text-align:center;width:100%;background:#333;color:#fff;font-weight:bold;border-radius:0px;float:left;" class="btn">
                                    <span style="margin-right:10px;" class="fa fa-desktop"></span> Lọc dữ liệu
                                </div>
                        </fieldset>
                    </div>
                    <div id="txtTo"></div>
                    <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="height: auto;padding:10px;">
                        <fieldset>
                            <asp:HiddenField runat="server" ID="hdfUserID" />
                                <asp:Panel runat="server" ID="pnlNguoiDung">
                            <div class="col-md-2 col-lg-2 col-sm-2 col-xs-4" style="padding:5px;padding-left:0px;">
                                    <label for="simple-input" style="line-height:30px;font-weight: bolder; text-transform: none">
                                    Người dùng </label>
                            </div>
                            <div class="col-md-10 col-lg-10 col-sm-10 col-xs-8" style="padding:5px;padding-left:0px;">
                                <asp:DropDownList runat="server" ID="ddlNguoiDung" CssClass="form-control" style="border:1px solid #333;border-radius:0px;" DataValueField="UserId" DataTextField="UserName"></asp:DropDownList>
                            </div>
                            </asp:Panel>
                        </fieldset>
                    </div>
                </asp:Panel>
    </div>
</div>
    <script type="text/javascript">

        jQuery(function ($) {

            $("#txtFromDate").jqxDateTimeInput({ width: '150px', height: '25px' });
            $("#txtToDate").jqxDateTimeInput({ width: '150px', height: '25px' });
        });

    </script>
<div style="width:100%;padding:10px;">
<!--start content 01-->
    <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="border:1px solid #333;margin-bottom:10px;padding:0px;">
                <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="padding:10px 20px;background:#000;color:#fff;font-size:18px;font-weight:bold;position:relative;">   
                    Hạn ngạch email
                </div>
                <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="height: auto;padding:10px;">
                    <fieldset>
                        <label id="lbltext" runat="server" style="margin-top: 10px; color:#333; font-family: Arial; font-size: 12px"></label>
                        <asp:Panel ID="Panel1" runat="server" BorderStyle="double" BorderColor="black" Width="100%" Height="40" BorderWidth="1">
                            <asp:Label ID="lblPercent" runat="server" BackColor="#ff7f00" Height="36" Style="margin-top:1px;margin-left:1px;text-align: center"></asp:Label>
                        </asp:Panel>
                    </fieldset>
                </div>
                <div id="jqxChart" class="col-md-6 col-xs-12 col-sm-12 col-lg-6" style="height: auto;padding:10px; height: 400px; position: relative; left: 0px; top: 0px;">
                </div>
                <div id="jqxChart_result" class="col-md-6 col-xs-12 col-sm-12 col-lg-6" style="height: auto;padding:20px; height: 400px; position: relative; left: 0px; top: 0px;">
                </div>
    </div>
</div>
<style>
    #tblChart {
        border:0px solid #fff;
    }
</style>    
                <script type="text/javascript">
                    
                    //function search()
                    //{
                    //    var url = "SendDashboard.aspx?from=" + $('#ContentPlaceHolder1_txtFromDate').val() + "&to=" + $('#ContentPlaceHolder1_txtToDate').val() + "";
                    //    window.location = url;
                    //}
                    jQuery(function ($) {

                        $("#btnFilter").click(function () {
                            /*****************limit*******************/
                            /*****************end limit*******************/
                            var userid = $('#ContentPlaceHolder1_ddlNguoiDung').val();
                            if (userid == null)
                                userid = $('#ContentPlaceHolder1_hdfUserID').val();
                            var postValue = "{from:'" + $('#txtFromDate').val() + "',to:'" + $('#txtToDate').val() + "', userid:" + userid + "}";
                            var chartRange = "Từ ngày " + $('#txtFromDate').val() + " đến ngày " + $('#txtToDate').val() + "";
                            //alert(postValue);

                            var chart = $('#jqxChart');
                            $.ajax({
                                type: "POST",
                                url: "SendDashboard.aspx/GetDashBoardData",
                                data: postValue,
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                autoBind: true,
                                success: function (data) {
                                    //AppendResponse(data);
                                    //alert(data.d);
                                    //alert(chart);
                                    var settings = {
                                        title: "Tổng hợp email gửi",
                                        description: "",

                                        

                                        enableAnimations: true,
                                        showLegend: true,
                                        showBorderLine: false,
                                        //legendLayout: { left: 300, top: 40, width: 300, height: 200, flow: 'vertical' },
                                        //padding: { left: -200, top: 5, right: 5, bottom: 5 },
                                        
                                        padding: { left: 5, top: 5, right: 5, bottom: 5 },
                                        titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                                        //source: dataAdapter,
                                        colorScheme: 'scheme04',
                                        source: data.d,
                                        categoryAxis:
                                            {
                                                dataField: 'Percent',
                                                showGridLines: true,
                                                flip: false
                                            },
                                        seriesGroups:
                                            [
                                                {
                                                    type: 'pie',
                                                    showLabels: true,
                                                    series:
                                                        [
                                                            {
                                                                dataField: 'Percent',
                                                                displayText: 'Title',
                                                                labelRadius: 150,
                                                                initialAngle: 15,
                                                                radius: 120,
                                                                centerOffset: 0,
                                                                formatFunction: function (value) {
                                                                    if (isNaN(value))
                                                                        return value;
                                                                    return parseFloat(value) + '%';
                                                                },

                                                                formatSettings: { decimalPlaces: 1 }

                                                            }
                                                        ]

                                                }
                                            ]
                                    };

                                    // setup the chart
                                    //alert(jQuery('#jqxChart').toString());
                                    chart.jqxChart(settings);
                                }
                            });

                            $.ajax({ 
                                type: "POST",
                                url: "SendDashboard.aspx/GetDashBoardResultData",
                                data: postValue,
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (data) {
                                    
                                    var settings = {
                                        title: "Kết quả gửi email",
                                        description: "",
                                        showLegend: true,
                                        showBorderLine: false,
                                        enableAnimations: true,
                                        padding: { left: 10, top: 5, right: 20, bottom: 5 },
                                        titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
                                        source: data.d,
                                        categoryAxis:
                                            {
                                                dataField: 'Title',
                                                showGridLines: false,
                                                flip: false
                                            },
                                        colorScheme: 'scheme04',
                                        seriesGroups:
                                            [
                                                {
                                                    type: 'column',
                                                    orientation: 'verticle',
                                                    columnsGapPercent: 100,
                                                    toolTipFormatSettings: { thousandsSeparator: ',' },
                                                    valueAxis:
                                                    {
                                                        flip: false,
                                                        //unitInterval: 1,
                                                        // maxValue:value, // 
                                                        minValue: 0,
                                                        displayValueAxis: true,
                                                        description: '',
                                                        formatFunction: function (value) {
                                                            return parseInt(value);
                                                        }
                                                    },
                                                    series: [
                                                            { dataField: 'Value', displayText: 'Email' }
                                                    ]
                                                }
                                            ]
                                    };

                                    $('#jqxChart_result').jqxChart(settings);
                                }
                            });
                        });

                        $('#btnFilter').trigger('click');
                    });
                </script>
</asp:Content>
